<template>
	<div id="app" v-cloak>
		<router-view v-if="isRouterAlive" />
	</div>
</template>

<script>
	import {
		isMobilePhone
	} from '@/api/isMobile'
	export default {
		name: "App",
		created() {
			sessionStorage.setItem('loginState', 0)
		},
		data() {
			return {
				isRouterAlive: true
			}
		},
		methods: {},
		provide() {
			return {
				reload: this.reload
			}
		},
		mounted() {
			if (isMobilePhone()) {
				document.addEventListener("visibilitychange", function() {

					if (document.visibilityState == "visible") {
						// alert("欢迎回来");
						location.reload()
						console.log("回来")
						//do something
						//继续视频播放
					}
					if (document.visibilityState == "hidden") {
						// console.log("不要走！")

						//do something else
						//暂停视频播放
					}
				})
				// 检测断网
				window.addEventListener("offline", () => {
					console.log("已断网");
				});
				window.addEventListener("online", () => {
					console.log("网络连接");
					location.reload()
				});
			}
		},
		methods: {
			reload() {
				this.isRouterAlive = false
				this.$nextTick(() => {
					this.isRouterAlive = true
				})
			}
		},

	};
</script>
<style lang='scss'>

	@import "@/styles/variables.scss";

	/* 协作底部按钮文字提示开始 */
	.interface-handle-height {
		height: 60px !important;
	}

	.interface-handle-btn {
		font-size: 12px;
		color: #aaa;
		line-height: 12px;
		margin-top: 8px;
		text-align: center;
	}

	.interface-handle-quit {
		height: 60px;
		position: relative;

		p {
			width: 100px;
			text-align: center;
			height: 40px;
			background: #ff0000;
			cursor: pointer;
			border-radius: 20px;
			margin-right: 0 !important;

			img {
				width: 40px;
				height: 40px;
			}
		}
	}

	/* 协作底部按钮文字提示结束 */
	/* 选择人员结束 */
	.el-dialog__header {
		text-align: left;
		padding: 16px 16px 0 !important;
	}

	.el-dialog__header .el-icon-close {
		font-size: 24px;
	}

	.el-dialog__body {
		padding: 16px !important;
	}

	.el-dialog {
		border-radius: 9px;
		margin: 0 auto !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.join-assets {
		.el-checkbox__input.is-checked {
			.el-checkbox__inner {
				background-color: $menuActiveText !important;
				border-color: $menuActiveText !important;
			}
		}
	}

	.cropper-view-box,
	.cropper-face {
		border-radius: 50%;
	}

	.el-popup-parent--hidden .fixed-header {
		padding-right: 0 !important;
	}

	.el-button--primary {
		background-color: $primaryColor;
		border-color: $primaryColor;
	}

	.el-button--text {
		color: $mainTextColor;
	}

	[v-cloak] {
		display: none;
	}

	.el-pager li:not(.disabled).active {
		background-color: $primaryColor !important;
	}

	/* 列表页面外层容器 */
	.app-list-container {
		height: 100%;
		background: $moduleBg;
		padding: 15px 10px 0 !important;
	}

	/* 列表页面顶部标题 */
	.app-main-header-title {
		font-size: 14px;
		color: $mainTextColor;
		font-weight: bold;
		padding-bottom: 15px !important;

		.app-header-text {
			font-size: 14px;
			line-height: 44px;
		}
	}

	// 头部搜索
	.top-search-container {
		.el-input__inner {
			height: 35px;
			background-color: rgba(255, 255, 255, 0) !important;
			border: none;
		}
	}






	.left-sub-menu .el-submenu__title .is-active {
		color: $menuActiveText !important;
		background: $menuActiveBg !important;
	}

	.left-sub-menu .el-submenu__title {
		text-align: left;

	}

	// 执行统计巡检排名
	.execution-data {
		.el-select {
			.el-input__inner {
				text-align: center;
				border: 0px solid rgba(255, 255, 255, 0) !important;
			}
		}
	}

	//创建巡检--定时发布
	.timer-container {
		.el-drawer.rtl {
			width: 680px !important;
			top: 6% !important;
		}

		.el-drawer__header> :first-child {
			outline: rgba(255, 255, 255, 0) !important;
			border: 1px solid rgba(255, 255, 255, 0) !important;
			color: #121212 !important;
		}

		.el-drawer__body {
			overflow: hidden;
			overflow-y: 105scroll;
		}
	}

	// 考勤打卡选择时间是
	.after-day-container {
		.el-input__inner {
			padding: 0 !important;
			text-align: center;
		}

		.el-input__icon {
			display: none;
		}
	}

	// 创建巡检
	.process-handle-container {
		.el-carousel__container {
			height: 100%;
		}
	}

	// 单选
	.el-radio__input.is-checked .el-radio__inner {
		border-color: $menuActiveText !important;
		background: $menuActiveText !important;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: $menuActiveText !important;
	}

	.el-dialog__body {
		padding: 20px !important;
	}

	/* 详情页布局 */
	.app-out-container {
		height: calc(100vh - 110px);
		/* border-top: 8px solid #f1f5fa !important; */
		overflow: hidden;
		overflow-y: auto;

		.el-table::before {
			height: 0;
		}
	}

	.app-main-content {
		background: #fff;
		padding: 20px 15px;
		border-bottom: 8px solid #f1f5fa;

		.el-table__empty-block {
			height: 80% !important;
		}

		.app-header-title {
			border-bottom: 1px solid #eee;
			padding: 0 0 20px 0;

			.app-title-text {
				font-size: 14px;
				color: #333;
				font-weight: bold;

				.app-title-required {
					font-weight: normal;
					font-size: 13px;
					color: #999;

					span {
						color: #ff0000;
						padding: 0 2px 0 16px;
					}
				}
			}

			.app-header-btns {
				img {
					width: 40px;
					height: 40px;
				}

				img:hover {
					cursor: pointer;
				}
			}
		}

		.app-header-form {
			margin: 20px 0 0;
			width: 100%;

			.app-header-form-row {
				width: 100%;
			}
		}
	}

	/* 分左右的列表页 */
	.app-columns-container {
		width: 100%;
		height: 100%;
		/* border-top: 8px solid #f1f5fa !important; */
		
		.app-left-container {
			/* background: $moduleBg; */
			height: 100%;
			width: calc(100% - 528px); 
			overflow: hidden;

			.app-left-content {
				height: calc(100vh - 180px);
				width: 100%;
				overflow: auto;
				overflow-y: auto;
			}
		}

		.app-right-container {
			width:520px;
			height: 95%;
			font-size:14px;
			overflow: hidden;
			overflow-y: auto;
			background: $moduleBg;

			.app-right-top-container {
				height:calc(55% - 8px);
				margin-bottom:8px !important;
				overflow: hidden;
				background: $moduleBg;
			}

			.app-right-bottom-container {
				height: 45%; 
				overflow: hidden;
				background: $moduleBg;
			}

			/* border-left: 8px solid #f1f5fa; */
		}
		.app-columns-bottom{
			width:100%;
			margin-top:8px !important;
			height:calc(45% - 8px);
			background: $moduleBg;
		}
	}

	/* 选择人员弹窗搜索 */
	.personal-container {
		.personal-search {
			margin-bottom: 10px;

			.el-input {
				height: 34px !important;
				line-height: 34px !important;
			}

			.el-input__inner {
				height: 34px;
				line-height: 34px;
				border-radius: 4px;
			}

			.el-input__icon {
				line-height: 34px;
			}
		}
	}

	/* 选择人员 */
	.personal-main-container {
		.el-tree-node__content {
			height: 32px;
			font-size: 12px;
		}
	}
</style>